<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box" @click="toSearch">
			<view class="search-input">
				<image src="/static/img/search_ico.png" mode="aspectFit" class="search-icon"></image>
				<view class="search-text">搜索</view>
			</view>
		</view>
		<view class="album-list" v-if="ongoingAlbums.length > 0">
			<view class="album-item" v-for="(item, index) in ongoingAlbums" :key="index" @click="toAlbum(item)">
				<view class="image-container">
					<image :src="item.banner" mode="aspectFill" class="album-image"></image>
					<view class="album-content">
						<view class="flex-s">
							<view class="">
								<view class="album-title">{{ item.name }}</view>
								<view class="flex-box">
									<text class="album-desc">{{ item.local }}</text>
									<text class="album-desc">{{ item.date_describe }}</text>
								</view>
							</view>
							<view class="" v-if="item.status == 1">
								<image class="jxz-icon"
									src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250328/b25c7cdb27cc41d5b4a8208a0f6bb9b1.png"
									mode=""></image>
							</view>
						</view>
						<view class="album-footer">
							<text class="image-count">{{ item.image_num }}张图片</text>
							<view class="view-more" :style="{ background: t('color1') }">
								<text>查看更多</text>
								<image src="/static/img/arrowright.png" mode="aspectFit" class="more-icon"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 标题区域 -->
		<view class="header">
			<view class="title">一年365天 300天在路上</view>
			<view class="subtitle">我们已走过的路</view>
		</view>

		<!-- 图片列表 -->
		<view class="album-list" v-if="completedAlbums.length > 0">
			<view class="album-item" v-for="(item, index) in completedAlbums" :key="index" @click="toAlbum(item)">
				<view class="image-container">
					<image :src="item.banner" mode="aspectFill" class="album-image"></image>
					<view class="album-content">
						<view class="flex-s">
							<view class="">
								<view class="album-title">{{ item.name }}</view>
								<view class="flex-box">
									<text class="album-desc">{{ item.local }}</text>
									<text class="album-desc">{{ item.date_describe }}</text>
								</view>
							</view>
						</view>
						<view class="album-footer">
							<text class="image-count">{{ item.image_num }}张图片</text>
							<view class="view-more" :style="{ background: t('color1') }">
								<text>查看更多</text>
								<image src="/static/img/arrowright.png" mode="aspectFit" class="more-icon"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var app = getApp()
export default {
	data() {
		return {
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			albumList: [

			],
			ongoingAlbums: [],
			completedAlbums: []
		}
	},
	onLoad() {
		this.getdata()
	},
	methods: {
		getdata() {
			var that = this;

			app.get('SocialSourceAlbum/list', {

			}, function (res) {
				if (res.status == 200) {
					that.albumList = res.data
					that.ongoingAlbums = res.data.filter(item => item.status == 1);
					that.completedAlbums = res.data.filter(item => item.status == 2);
				} else {
					app.error(res.msg)
				}
			});
		},
		toAlbum(item) {
			uni.navigateTo({
				url: `/pagesSocial/album/album?share_type=1&album_id=${item.id}`
			})
		},
		toSearch() {
			uni.navigateTo({
				url: './search'
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.search-box {
	margin-bottom: 40rpx;

	.search-input {
		background-color: #fff;
		border-radius: 40rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.search-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
	}
}

.header {
	text-align: center;
	margin-bottom: 40rpx;

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
		position: relative;
		display: inline-block;
		padding: 0 40rpx;

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			width: 60rpx;
			height: 1px;
			background-color: #ddd;
		}

		&::before {
			left: -40rpx;
		}

		&::after {
			right: -40rpx;
		}
	}
}

.album-list {
	.album-item {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		position: relative;

		.image-container {
			position: relative;
			width: 100%;
		}

		.album-image {
			width: 100%;
			height: 180rpx;
			position: relative;
		}

		.album-content {
			padding: 20rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.album-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				margin-bottom: 10rpx;
			}

			.album-desc {
				font-size: 28rpx;
				color: #fff;
				margin-bottom: 20rpx;
			}

			.album-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.image-count {
					font-size: 24rpx;
					color: #fff;
				}

				.view-more {
					display: flex;
					align-items: center;
					background-color: #f8f8f8;
					padding: 6rpx 10rpx;
					border-radius: 30rpx;

					text {
						font-size: 24rpx;
						color: #fff;
						margin-right: 10rpx;
					}

					.more-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
}

.flex-box text:not(:last-child)::after,
.flex-box text:not(:last-child)::after {
	content: "|";
	margin: 0 8px;
	color: #ccc;
}

.jxz-icon {
	width: 80rpx;
	height: 80rpx;
}

.flex-s {
	display: flex;
	justify-content: space-between;
}
</style>